<template>
  <div class="home borderbox">
    <div class="loginbg"></div>
    <div class="loginbox">
      <div class="head flex-row justify-center">
        <img src="" alt="" />
        <span class="fz40 color333 fwbold ml16">佳木斯市包联“直通车”</span>
      </div>
      <div class="input_box flex-col">
        <label class="fz28 fwbold">账号</label>
        <input
          v-model="login.account"
          type="text"
          class="fwbold"
          placeholder="请输入您的账号"
        />
      </div>
      <div class="input_box mt48 flex-col">
        <label class="fz28 fwbold">密码</label>
        <input
          v-model="login.password"
          type="password"
          class="fwbold"
          placeholder="请输入您的密码"
        />
      </div>
      <div class="remember mt25 flex-row align-center">
        <input
          v-model="isremember"
          type="checkbox"
          @change="changeRemember(isremember)"
        /><span class="fz24 ml10">记住密码</span>
      </div>
      <van-button
        class="submitbtn"
        :style="{ opacity: `${login.password || login.account ? 1 : 0.5}` }"
        type="info"
        @click="tologin"
        >登录</van-button
      >
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from "vue";
import { Toast } from "vant";
import { login, getInfo } from "@/api/api";
Vue.use(Toast);
export default {
  name: "login",
  components: {},
  data() {
    return {
      login: {
        account: "",
        password: "",
      },
      isremember: false,
    };
  },
  created() {
    console.log(this.$route.query);
    var losetoken = JSON.parse(window.localStorage.getItem("losetoken"));
    if (losetoken) {
      Toast({
        message: "身份失效\n请重新登录",
        icon: "smile-o",
      });
    }
    var rempassword = JSON.parse(window.localStorage.getItem("rempassword"));
    if (rempassword) {
      this.login.account = rempassword.account;
      this.login.password = rempassword.password;
      this.isremember = true;
    }
  },
  methods: {
    changeRemember(value) {},
    // 登录
    tologin() {
      // druglist().then(res=>{
      //   console.log(res);
      // })
      if (this.login.account && this.login.password) {
        let data = {
          username: this.login.account,
          password: this.login.password,
        };
        login(data).then((response) => {
          if (response.data.code == 200) {
            window.localStorage.removeItem("losetoken");
            window.localStorage.setItem("user", JSON.stringify(response.data));
            if (this.isremember) {
              let obj = {
                account: this.login.account,
                password: this.login.password,
              };
              window.localStorage.setItem("rempassword", JSON.stringify(obj));
            } else {
              window.localStorage.removeItem("rempassword");
            }
            Toast.success("登录成功");
            this.$router.push("/");
          } else {
            Toast({
              message: "账号或密码填写错误",
              icon: "cross",
            });
          }
        });
      } else {
        Toast({
          message: "请填写账号或密码",
          icon: "smile-o",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-button--normal {
  width: 100%;
  background: #409eff;
  border-radius: 0.08rem;
}
.home {
  padding: 0 0.48rem;
  background: url(@/static/img/loginbg.png) no-repeat;
  background-size: auto 7.05rem;
  overflow: hidden;

  .loginbox {
    margin-top: 2.93rem;
    .head {
      img {
        width: 0.56rem;
      }
    }
    .input_box {
      margin-top: 1rem;
      height: 1.2rem;
      border-bottom: 1px solid #e4e7ed;
      label {
        color: #606266;
      }
      input {
        height: 0.4rem;
        font-size: 0.32rem;
        margin-top: 0.22rem;
        border: none;
        background: transparent;
        color: #303133;
      }
      input::placeholder {
        color: #909399;
        font-weight: 400;
      }
    }
    .remember {
      height: 0.42rem;
      input[type="checkbox"] {
        position: relative;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 0.24rem;
        height: 0.24rem;
        border-radius: 0px;
        border: 1px solid #dcdfe6;
        background-color: #ffffff;
        outline: none;
        transition: background-color 0.3s;
      }

      input[type="checkbox"]::after {
        content: "\2713"; /* Unicode 对号字符 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.2rem;
        color: #fff;
        opacity: 0;
        transition: opacity 0.3s;
      }

      input[type="checkbox"]:hover {
        background-color: #ffffff;
      }

      input[type="checkbox"]:checked {
        background-color: #007bff; /* 蓝色背景 */
        border-color: #007bff;
      }

      input[type="checkbox"]:checked::after {
        opacity: 1;
        color: #fff; /* 白色对号 */
      }
      span {
        color: #606266;
      }
    }
    .submitbtn {
      margin: 0.64rem 0;
    }
  }
}
</style>
